<template>
  <div>
    <div class="cooperation-list">
      <!-- 合作券 -->
      <div v-for="(v, k) in allList" :key="k">
        <div class="title bold">{{k}}</div>
        <div class="mini-card" v-for="(v, i) in v" :key="i">
          <div class="text">{{v.name}}</div>
          <div class="text blue">{{v.confirm_time}}</div>
          <img src="/src/assets/icons/trash.png" @click="delTicket(v.id)">
        </div>
      </div>
      <!-- 按钮 -->
      <div class="mini-card button" @click="$router.push({name: 'Cooperation'})">
        <div class="text">
          <img src="/src/assets/icons/add.png">
          <span>合作新券</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="hint">
        <div class="title">券商合作规则</div>
        <div>
          <p>1. 付款规则：所有商品都是直接先在线上付款购买；</p>
          <p>2. 价格规则：拿货价格会根据您选择的“自动确认时间”来进行阶梯式上浮，具体上浮情况如下表：</p>
          <table border="1" cellpadding="0" cellspacing="0">
            <tr>
              <td>12小时</td>
              <td>千分之一</td>
            </tr>
            <tr>
              <td>24小时</td>
              <td>千分之三</td>
            </tr>
            <tr>
              <td>48小时</td>
              <td>千分之六</td>
            </tr>
            <tr>
              <td>72小时</td>
              <td>百分之一</td>
            </tr>
          </table>
          <p>3. 批量规则：付款成功后，可以通过生成的提货链接&提货码，实现自助批量提货；</p>
          <p>4. 券商合作流程，<router-link :to="{name: 'ExplainCoupon'}">请参考这里</router-link></p>
          <p>希望合作伙伴选择对您合适的“自动确认时间”！</p>
          <p>请知晓：自动确认时间越长、风险也即越大！</p>
          <p>更希望彼此长期愉快合作、共同发展、合作共赢！</p>
          <p>相信：跟惠权益合作将大大提高您的收货效率、减少碎片化时间！</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'
  
  export default {
    name: 'CooperationList',
    data () {
      return {
        allList: [],
        status: {}
      }
    },
    methods: {
      getList () {
        this.$post('/vue/coupon_customer/list', '').then(data => {
          this.allList = data.list
          this.status = data.status
        })
      },
      delTicket (id) {
        let params = {id: id}
        this.$post('/vue/coupon_customer/delete', params).then(data => {
          msg('删除成功')
          this.getList()
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);
  @c-light-blue: rgb(240, 244, 247);
  @c-ll-blue: rgb(242, 247, 250);
  @c-orange: rgb(245, 166, 35);

  .cooperation-list {
    padding: 0 12px;
    background-color: #FFF;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: left;
    -webkit-overflow-scrolling: touch;
    .title {
      font-size: 16px;
      line-height: 32px;
      color: @c-124;
      margin: 12px 0;
      &.bold {
        font-weight: bold;
      }
    }
    .mini-card {
      margin: 12px 0;
      padding: 8px 12px;
      background-color: @c-ll-blue;
      color: @c-124;
      border-radius: 8px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      display: flex;
      .text {
        flex: 1;
        font-size: 13px;
        line-height: 24px;
        font-weight: bold;
        &.blue {
          color: @c-blue;
        }
        span {
          font-size: 12px;
          counter-reset: @c-169;
          font-weight: normal;
          margin-left: 8px;
        }
      }
      img {
        width: 24px;
        height: 24px;
      }
      &.button {
        border-radius: 20px;
        .text {
          text-align: center;
          img {
            vertical-align: middle;
          }
          span {
            vertical-align: middle;
            margin: 0;
          }
        }
      }
    }
    .line {
      margin-left: -12px;
      margin-right: -12px;
      height: 8px;
      background-color: @c-light-blue;
    }
    .hint {
      color: @c-124;
      font-size: 12px;
      .title　{
        font-size: 12px;
        line-height: 24px;
        color: @c-orange;
        justify-content: center;
      }
      p {
        line-height: 24px;
      }
      .ti-2 {
        text-indent: 2em;
      }
      table {
        width: 75%;
        margin: 12px auto;
        text-align: center;
        border-color: @c-226;
      }
    }
  }
</style>